<template>
  <view class="container">
    <uv-navbar title="收款码" autoBack leftIconColor="#fff" bgColor="rgba(0,0,0,0)" :title-style="{'color':'#fff'}"
      placeholder></uv-navbar>
    <view class="block">
      <view class="block-ht">
        <image class="pay_code_icon" src="../../static/images/pay_code.png" mode=""></image>
        <view class="block-ht-title">
          商家收款码
        </view>
      </view>
      <view class="block-body">
        <view class="desc">
          支付宝/微信扫一扫，向我付钱
        </view>
        <view style="display: flex;justify-content: center;margin-top: 36rpx;">
          <uv-qrcode ref="qrcode" size="350rpx" value="https://h5.uvui.cn"></uv-qrcode>
        </view>
        <view style="font-size: 30rpx;text-align: center;margin-top: 15rpx;" v-if="remark">
          {{remark}}
        </view>
        <view class="codeNum">
          编号：15645164654654
        </view>
        <view class="ht-foot">
          <view class="setAmount" @click="toclear" v-if="remark">清除数据</view>
          <view class="setAmount" v-else @click="toPayCode">设置收款码</view>
          <view class="saveCode">保存收款码</view>
        </view>
      </view>
    </view>
    <view class="setting">
      <view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="toPage(item)">
        <image class="setting-item-icon" :src="item.url" mode=""></image>
        <view class="setting-item-label">
          {{item.label}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        settingList: [{
            label: "账单流水",
            url: "/static/mine/s1.png"
          },
          {
            label: "收款语音提醒",
            url: "/static/mine/s2.png"
          },
          {
            label: "收款账户",
            url: "/static/mine/s3.png"
          }
        ],
        remark: ""
      }
    },
    onShow() {
      let self = this;
      uni.$on("setUserLabel", data => {
        console.log("接收收款码备注", data);
        self.remark = data;
      })
    },
    methods: {
      toPayCode() {
        uni.navigateTo({
          url: "/pages/mine/setPayCode"
        })
      },
      toPage(item){
        switch (item.label){
          case "账单流水":
          uni.navigateTo({
            url: "/pages/subpack/billflow"
          })
            break;
          default:
            break;
        }
      },
      toclear(){
        this.remark = "";
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(360deg, rgba(255, 60, 33, 0) 0%, #EA7222 100%);
    padding: 30rpx;
    box-sizing: border-box;

    .setting {
      padding: 0 44rpx;
      box-sizing: border-box;
      background: #fff;
      border-radius: 40rpx;
      margin-top: 60rpx;

      .setting-item {
        display: flex;
        align-items: center;
        height: 100rpx;

        .setting-item-icon {
          width: 33rpx;
          height: 33rpx;
          margin-right: 30rpx;
        }

        .setting-item-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }
      }
    }

    .block {
      padding: 0 28rpx;
      box-sizing: border-box;
      border-radius: 30rpx;
      background: #fff;

      .block-ht {
        display: flex;
        align-items: center;
        height: 130rpx;
        border-bottom: 2rpx solid #eee;

        .pay_code_icon {
          width: 48rpx;
          height: 48rpx;
          margin-right: 10rpx;
        }

        .block-ht-title {
          font-weight: 400;
          font-size: 32rpx;
          color: #000000;
          text-align: center;
        }
      }

      .block-body {
        padding: 50rpx 0;
        box-sizing: border-box;

        .desc {
          font-weight: 400;
          font-size: 28rpx;
          color: #666666;
          text-align: center;
        }

        .codeNum {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          text-align: center;
          margin-top: 54rpx;
        }

        .ht-foot {
          display: flex;
          justify-content: space-between;
          font-weight: 500;
          font-size: 28rpx;
          color: #EA7222;
          padding: 0 60rpx;
          box-sizing: border-box;
          margin-top: 60rpx;

          .setAmount {}

          .saveCode {}
        }
      }
    }
  }
</style>